<template>
  <div class="bg-white rounded-lg shadow p-4 lg:p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold text-gray-700">客户案例</h2>
      <button @click="addCase" class="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">
        添加案例
      </button>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-cols-3 gap-4">
      <div v-for="(caseItem, index) in modelValue" :key="caseItem.id || index"
        class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start mb-3">
          <input v-model="caseItem.title" type="text" placeholder="案例标题"
            class="text-lg font-medium border-b border-transparent focus:border-gray-300 focus:outline-none">
          <button @click="removeCase(index)" class="text-red-500 hover:text-red-700">
            删除
          </button>
        </div>

        <div class="mb-3">
          <div class="h-40 bg-gray-100 rounded-lg flex items-center justify-center mb-2">
            <!-- 上传图片组件，不知道怎么回显，先注释了 -->
            <!-- <ImageUpload class="w-50 h-40" :uploadUrl="caseItem.image || ''"
              @upload-success="(url) => uploaded(url, index)" :key="'CaseStudiesSection' + index" /> -->
            <img v-if="caseItem.image" :src="caseItem.image" class="w-full h-full object-cover rounded-lg" alt="">
            <span class="text-gray-400 text-sm" v-else>案例图片预览</span>
          </div>
          <input v-model="caseItem.image" type="text" placeholder="图片文件名"
            class="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
        </div>

        <textarea v-model="caseItem.description" rows="3" placeholder="案例描述"
          class="w-full px-3 py-1 border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500 mb-3"></textarea>

        <!-- <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input v-model="caseItem.is_featured" type="checkbox" :id="'featured-' + index"
              class="h-4 w-4 text-indigo-600 rounded focus:ring-indigo-500">
            <label :for="'featured-' + index" class="ml-2 text-sm text-gray-600">特色案例</label>
          </div>

          <input v-model="caseItem.sort_order" type="number" min="0" max="100"
            class="w-20 px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CaseStudy } from '~/types/home';
import ImageUpload from '~/components/ImageUpload.vue'


const props = defineProps<{
  modelValue: CaseStudy[];
}>()

const emit = defineEmits(['update:modelValue'])

const addCase = () => {
  const newCases = [...props.modelValue, {
    title: '',
    description: '',
    image: '',
    alt: '',
  }]
  emit('update:modelValue', newCases)
}

const removeCase = (index: number) => {
  const newCases = [...props.modelValue]
  newCases.splice(index, 1)
  emit('update:modelValue', newCases)
}


function uploaded(res: any, index: number) {
  let data = res.response.data
  let url = data[0].filePath
  // 创建新数组确保响应式更新
  const updatedCases = [...props.modelValue]
  updatedCases[index] = url
  emit('update:modelValue', updatedCases)
}
</script>